<template>
  <div>
    <!-- 头部栏 -->
    <van-sticky>
      <div class="header">
        <div class="logo"><img src="../assets/header-logo.png" alt="" /></div>
        <div class="search">
          <input type="text" placeholder="搜索" v-model="textValue" />
          <span><van-icon name="search" size="7vw" @click="teV" /></span>
        </div>
      </div>
    </van-sticky>

    <!-- nav导航栏 -->
    <mt-navbar fixed style="margin-top: 22vw" v-model="selected">
      <mt-tab-item id="1"><div style="font-size: 1rem">推荐</div></mt-tab-item>
      <mt-tab-item id="2"><div style="font-size: 1rem">视频</div></mt-tab-item>
      <mt-tab-item id="3"><div style="font-size: 1rem">户外</div></mt-tab-item>
      <mt-tab-item id="4"><div style="font-size: 1rem">摄影</div></mt-tab-item>
    </mt-navbar>

    <mt-tab-container
      v-if="status"
      class="connect"
      style="margin: 12vw 0 12vw"
      v-model="selected"
    >
      <mt-tab-container-item
        infinite-scroll-distance="10"
        v-infinite-scroll="loadMore"
        class="item"
        id="1"
      >
        <mt-cell style="width: 50%" v-for="item in data" :key="item.id">
          <article-item :selected="selected" :item="item" style="width: 100%" />
        </mt-cell>
      </mt-tab-container-item>
      <!-- 户外 -->
      <mt-tab-container-item class="item" id="2">
        <mt-cell style="width: 50%" v-for="item in data" :key="item.id">
          <article-item :selected="selected" :item="item" style="width: 100%" />
        </mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item class="item" id="3">
        <mt-cell style="width: 50%" v-for="item in data" :key="item.id">
          <article-item :selected="selected" :item="item" style="width: 100%" />
        </mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item class="item" id="4">
        <mt-cell style="width: 50%" v-for="item in data" :key="item.id">
          <article-item :selected="selected" :item="item" style="width: 100%" />
        </mt-cell>
      </mt-tab-container-item>
    </mt-tab-container>
    <!-- <van-tabs v-model="active">
        <van-tab title="推荐">
          <article-item />
          <article-item />
          <article-item />
          <article-item />
          <article-item />
          <article-item />
          <article-item />
          <article-item />
        </van-tab>
        <van-tab title="关注">内容 2</van-tab>
        <van-tab title="户外">内容 3</van-tab>
        <van-tab title="视频">内容 4</van-tab>
        <van-tab title="摄影">内容 4</van-tab>
      </van-tabs> -->

    <!-- 底部 -->
    <van-tabbar class="footer" v-model="activeFooter">
      <van-tabbar-item icon="home-o" @click="index">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="msg">关注</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="friend">好友</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  components: { ArticleItem },

  data() {
    return {
      activeFooter: 0,
      stopLoading: false,
      pageNum: 1, //页码
      status: false,
      data: null, //接收首页文章列表数据
      createUser: {
        avatarUrl: "",
        username: "",
      },
      articleDo: {
        imgIds: [],
        masterImg: "",
        id: "",
      },

      textValue: "",
      // active: 0,
      selected: "1",

      // tabSelected: this.$route.path.split('/').pop()
    };
  },
  activated() {
    console.log("activate");
    this.stopLoading = false;
  },
  deactivated() {
    console.log("deactivate");
    this.stopLoading = true;
  },
  methods: {
    loadMore() {
      if (this.stopLoading) {
        return;
      }
      // console.log('到底了');
      this.pageNum++;
      // console.log(this.pageNum);
      let url = `/op/articleDo/getArticleList?pageNum=${this.pageNum}&type=${this.selected}`;
      this.axios
        .get(url, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          this.data.push(...res.data.data.articleList);
          this.status = true;
        });
    },
    index() {
      if (this.$route.path == "/index") return;
      this.$router.push("/index");
    },
    msg() {
      if (this.$route.path == "/msg") return;
      this.$router.push("/msg");
    },
    friend() {
      if (this.$route.path == "/friend") return;
      this.$router.push("/friend");
    },
    mine() {
      if (this.$route.path == "/mine") return;
      this.$router.push("/mine");
    },
    teV() {
      if (this.$route.path == "/teV") return;
      console.log(this.textValue);
    },
  },
  watch: {
    selected(to, from) {
      let url = `/op/articleDo/getArticleList?pageNum=1&type=${to}`;
      this.axios
        .get(url, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("首页文章列表:", res);
          console.log("accesstoken:", this.$store.state.accesstoken);
          this.data = res.data.data.articleList;

          // this.articleDo = this.res.data.data.articleList.articleDo
          // this.createUser = this.res.data.data.articleList.createUser
          this.status = true;
        });
    },
  },
  mounted() {
    var req = new XMLHttpRequest();
    req.open("GET", document.location, false);
    req.send(null);
    var headers = req.getAllResponseHeaders();
    console.log(headers);
    let url = `/op/articleDo/getArticleList?pageNum=1&type=1`;
    this.axios
      .get(url, {
        "Context-Type": "application/json",
        headers: { accesstoken: this.$store.state.accesstoken },
      })
      .then((res) => {
        console.log("首页文章列表:", res);
        console.log("accesstoken:", this.$store.state.accesstoken);
        this.data = res.data.data.articleList;

        // this.articleDo = this.res.data.data.articleList.articleDo
        // this.createUser = this.res.data.data.articleList.createUser
        this.status = true;
      });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  background-color: #f5d4a9;
}
.header {
  margin-top: -2vw;
  display: flex;
  padding: 5vw 0 0 0;
  height: 20vw;
  background-color: rgba(245, 212, 169);
  .logo {
    width: 32vw;
    img {
      width: 90%;
      margin-left: 4vw;
    }
  }
  .search {
    flex: 1;
    input {
      width: 70%;
      line-height: 8vw;
      margin: 0 4vw 0 4vw;
      margin-top: 5vw;
      border-radius: 13vw;
      border: 0;
      outline: none;
      background-color: #fff;
      opacity: 0.7;
      text-indent: 20vw;
      font-size: 4vw;
    }
    span {
      color: #fff;
      font-size: 4vw;
    }
    .van-icon {
      position: relative;
      top: 1.4vw;
    }
  }
}
.mint-navbar {
  background-color: rgba(245, 212, 169);
  color: #777;
  font-weight: 700;
}
.mint-cell {
  background-color: rgba(245, 212, 169);
}
.mint-tab-item.is-selected {
  border-bottom: 3px solid rgb(233, 109, 51);
  color: rgb(233, 109, 51);
}

// ::v-deep .van-tabs__nav {
//   height: 2.5rem;
// }
.item {
  background-color: rgba(245, 212, 169);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.footer {
  background-color: rgba(245, 212, 169);
}
.van-tabbar-item--active {
  background-color: rgba(245, 212, 169);
  color: rgb(233, 109, 51);
}
</style>
